<template>
	<view class="forget-wrap">
		<back :back-title="backTitle"></back>
		<view class="list">
			<view class="input-list">
				<view class="input-wrap">
					<view class="title">注册手机：</view>
					<input type="text" v-model="list.phone" placeholder="请输手机号码" @focus="handleShowButton">
				</view>
				<view class="input-wrap">
					<view class="title">验证码：</view>
					<input type="text" v-model="list.code" placeholder="请输入验证码" @focus="handleShowButton">
					<view class="code" :class="{gray: Number(codeDesc) > 0}" @click.stop="handleSend"> <text v-if="Number(codeDesc) > 0">重新获取</text> {{codeDesc}} <text v-if="Number(codeDesc) > 0">s</text></view>
				</view>
				<view class="input-wrap">
					<view class="title">重置密码：</view>
					<input type="text" v-model="list.pwd" placeholder="请重置密码" @focus="handleShowButton">
				</view>
			</view>
			<view class="button-wrap" v-if="!showButton">
				<common-button :btn-title="btnTitle" @submit="handleSubmit"></common-button>
			</view>
		</view>
	</view>
</template>

<script>
import commonButton from '../../components/button'
import {sendCode, forgetPassword} from '../../api/login'
import {validityPhone} from '../../utils'
	export default {
		name: 'forget',
		components: {
			commonButton
		},
		data() {
			return {
				backTitle: '找回密码',
				list: {
					phone: '',
					code: '',
					pwd: ''
				},
				codeDesc: '发送验证码',
				timer: null,
				btnTitle: '完成',
				height: 0,
				showButton: false
			}
		},
		created() {
			const _this = this
			uni.getSystemInfo({
				success(res){
					_this.height = res.windowHeight
				}
			})
		},
		mounted() {
			const _this = this
			uni.onWindowResize((res) => {
				_this.showButton = res.size.windowHeight < _this.height
			})
			this.$once('hook:beforeDestroy', () => {
				uni.offWindowResize(()=>{})
			})
		},
		methods: {
			handleSend() {
				const flag = this.validity()
				if(!flag) return
				const date = +new Date()
				const minute = 1 * 60 * 1000
				const lastTime = uni.getStorageSync('LAST_TIME')
				const residue = Math.round(60 - (date - lastTime) / 1000)
				if (lastTime) {
					if (date - lastTime > minute) {
						this.setCountDown(date)

					}
				} else {
					this.setCountDown(date)
				}
			},
			// 倒计时
			countDown() {
				if (this.timer) {
					clearTimeout(this.timer)
				}
				if (this.codeDesc > 1) {
					this.codeDesc = this.codeDesc - 1
					this.timer = setTimeout(() => {
						this.countDown()
					}, 1000)
					this.$once('hook:beforeDestroy', () => {
						clearInterval(this.timer)
					})
				} else {
					clearTimeout(this.timer)
					this.codeDesc = '发送验证码'
				}
			},
			// 倒计时封装
			setCountDown(date) {
				uni.setStorageSync('LAST_TIME', date)
				const CODE = '发送验证码'
				if (this.codeDesc === CODE){
					this.codeDesc = 60
					this.countDown()
					this.getsms()
				}
			},
			// 获取验证码
			async getsms() {
				const {phone} = this.list
				try {
					await sendCode({phone})
				} catch (error) {
					
				}
			},
			handleShowButton() {
				this.showButton = true
			},
			// 电话检测
			validity() {
				const {phone} = this.list
				console.log(phone)
				if(!validityPhone(phone)) {
					uni.showToast({
						title: '注册电话格式错误',
						icon: 'none'
					})
					return false
				}
				return true
			},
			// 提交
			async handleSubmit() {
				const flag = this.validitys()
				const {phone,pwd,code} = this.list
				if (flag) {
					try {
						await forgetPassword({phone,pwd,code})
						uni.showToast({
							title: '修改成功',
							success() {
								uni.navigateTo({
									url: '/pages/login/index'
								})
							}
						})
					} catch (error) {
						
					}
				}
			},
			// 检测
			validitys() {
				const {phone,pwd,code} = this.list
				if(!validityPhone(phone)) {
					uni.showToast({
						title: '注册电话格式错误',
						icon: 'none'
					})
					return false
				}
				if(pwd==='') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
					return false
				}
				if (code ==='') {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none'
					})
					return false
				}
				return true
			}
		}
	}
</script>

<style lang="scss">
.forget-wrap{
	width: 100%;
	min-height: 100vh;
	.button-wrap{
		position: fixed;
		bottom: 52upx;
		left: 0;
		padding: 0 20upx;
		box-sizing: border-box;
		
	}
	.list{
		width: 100%;
		padding: 0 20upx;
		box-sizing: border-box;
	}
	.input-list{
		padding-left: 20upx;
		box-sizing: border-box;
		width: 100%;
	}
	.input-wrap{
		display: flex;
		width: 100%;
		align-items: center;
		height: 114upx;
		border-bottom: 1px solid #e1e1e1;
		.title{
			font-size: 30upx;
			color: #999;
			width: 150upx;
			text-align: justify;
      text-align-last: justify;
		}
		input {
			flex: 1;
			height: 100%;
			font-size: 30upx;
			color: #333;
			padding: 0 10upx;
			box-sizing: border-box;
		}
		.code{
			width: 180upx;
			height: 100%;
			color: #2C6DD2;
			line-height: 115upx;
			box-sizing: border-box;
			text-align: cenetr;
			font-size: 30upx;
		}
		.gray{
			color: #999
		}
	}
}
</style>
